/* eslint-disable */
<template>
  <!-- start form-->
  <!-- 
	<div class="grid-content">
		<el-row :gutter="20">
			 left 
			<el-col :span="12">
				<InputCase @updateFromInputCase="updateCaseInfo($event)" @submitFromInputCase="submitToServer($event)" title="用户输入"></inputCase>
			</el-col>
			 right 
			<el-col :span="12">
				display ontiome
				<CaseInfo class="local" :data="local" title="实时显示"></CaseInfo>
				search result
				<CaseInfo v-loading="case_info_loading" :data="case_data" title="查询结果"></CaseInfo>
			</el-col>
		</el-row>
		<QueryList v-loading="loading" :dataArray="express" @checkQueryItem="showClickItem($event)"></QueryList>
	</div> 
  -->
	<div class="total_bg">
		<h1 class="total_title">REARCH</h1>
		<a class="logo">
		    <img src="./assets/new_logo.png">
		</a>
		<div class="grid-content">
			<InputCase @updateFromInputCase="updateCaseInfo($event)" @submitFromInputCase="submitToServer($event)" title="用户输入"></inputCase>
		</div>
		<div  class="grid-content">
			<QueryList :loading="loading"  :dataArray="express" @checkQueryItem="showClickItem($event)"></QueryList>
		</div>
		<div class="grid-content">
			<el-row :gutter="20">
				<!-- left --> 
				<el-col :span="12">
					<h1 class="case1_title">当前病历信息</h1>
					<CaseInfo class="local" :data="local" title="实时显示"></CaseInfo>
				</el-col>
				<!-- right --> 
				<el-col :span="12">
					<h1 class="case2_title">检索病历信息</h1>
					<CaseInfo v-loading="case_info_loading" :data="case_data" title="查询结果"></CaseInfo>
				</el-col>
			</el-row>
		</div>
		
	</div>
  <!--end form-->
  
  
</template>

<script>
import InputCase from './components/InputCase.vue'
import CaseInfo from './components/CaseInfo.vue'
import QueryList from './components/QueryList.vue'
import axios from 'axios'

export default {
  name: 'App',
  
  components:{InputCase,CaseInfo,QueryList},
  
	  data(){
		return{
		//初始化
			express:{},
			local:{},
			loading:false,
			case_info_loading:false,
			case_data:null,
		}
	  },
	  
	  created(){

	  },
	  
  
    methods:{
		/*
		* 向后端发送AJAX请求返回数据
		*/
		submitToServer(data){
			axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'; // 配置请求头
			console.log('/api?'+JSON.stringify(data))
			var that = this;
			
			//替换特殊字符.
			var data_str = JSON.stringify(data);
			data_str =  data_str.replace(/%/g,"%25");
			// var test = "%";
			// test  = test.replace(/%/,"%25");
			// console.log(test);
			this.loading = true;
			axios.get('/api?data='+ data_str)
			.then(response =>{
				setTimeout(function(){
					console.log('后端数据:')
					console.log(response.data)
					if(response.data[0]){
						that.express = response.data
						that.loading=false;
					}
				},300)
			})
		},//end submitToServer
		
		/*
		* 更新CaseInfo组件
		*/
		updateCaseInfo(data){
			this.local = data;
		},
		
		/*
		* 点击查询到的病例,展示该病例详细信息
		*/			
		showClickItem(data){
			console.log(data);
			this.case_info_loading=true;
			setTimeout(()=>{
				this.case_data=data;
				this.case_info_loading=false;
			},300);

		}
    },//end methods
	/*
		监听变量
	*/
	watch:{

	}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.local{
	margin-bottom: 20px;
}

	.total_title{
		position: absolute;
		width: 286px;
		height: 98px;
		left: 33.14px;
		top: 37px;
		
		font-family: Noto Sans Gujarati UI;
		font-style: normal;
		font-weight: bold;
		font-size: 72px;
		line-height: 98px;
		color: #6FB1DB;
	}
	
	.logo{
		position: absolute;
		width: 67px;
		height: 67px;
		left: 328.03px;
		top: 37px;
	}
	
	.input_title{
		position: absolute;
		width: 216px;
		height: 46px;
		left: 56.61px;
		top: 200px;
		
		font-family: Microsoft YaHei UI;
		font-style: normal;
		font-weight: bold;
		font-size: 36px;
		line-height: 46px;
	}
	
	.input_color{
		background: #F8FFFE;
	}
	
	.input_left{
		width: 880px;
		height: 467px;
		margin-top: 245px;
		margin-left: 1px;
		background: #FFFFFF;
	}
	
	.input_right1{
		width: 896px;
		margin-top: 244px;
		margin-left: 1px;
		background: #FFFFFF;
	}
	
	.input_right2{
		width: 896px;
		margin-top: 25px;
		margin-left: 1px;
		background: #FFFFFF;
	}
	
	.input_submit{
		width: 200px; 
		background-color: #83CBFF;
		font-family: Microsoft YaHei UI;
		font-style: normal;
		font-weight: bold;
		font-size: 18px;
		line-height: 30px;
		color: #34393c;
	}
	
	.input_submit:focus{
		background-color: #83CBFF;
		color: #34393c;
	}
	
	.input_submit:hover{
		color: #409fff;
		background-color: #ecf5ff;
	}
	
	
	
	.inter_span{
		height: 55px;
		background: #FFFFFF;
	}
	
	.query_span{
		margin-top: 30px;
	}
	
	.query_title{
		font-family: Microsoft YaHei UI;
		font-style: normal;
		font-weight: bold;
		font-size: 36px;
		line-height: 46px;
	}
	
	.case1_title{
		
		font-family: Microsoft YaHei UI;
		font-style: normal;
		font-weight: bold;
		font-size: 36px;
		line-height: 46px;
	}
	
	.case2_title{
		
		font-family: Microsoft YaHei UI;
		font-style: normal;
		font-weight: bold;
		font-size: 36px;
		line-height: 46px;
	}
	
	.case_inter_span{
		margin-top: 50px;
	}
	
	.logo{
		position: absolute;
		top: 104px;
		left: 350px;
	}	
	
	html{
		background-color: #cfeaff;
	}

</style>
